import React from 'react';

import { BrowserRouter, Route } from "react-router-dom";

// 注入全局样式
import { GlobalStyle } from "./style";
// 全局引用icon-font
import "./statics/iconfont/iconfont.css";

// 引入store做数据状态管理
import { Provider } from "react-redux";
import store from "./store";

import Header from "./common/header";
import Home from "./pages/home";

// 之前是直接拿到Detail组件
// import Detail from "./pages/Detail";
// 现在获取DetailLoadable异步组件
import DetailLoadable from "./pages/Detail/loadable";

import Login from './pages/login';

function App() {
  return (
    <Provider store={store}>
      <React.Fragment>
        <GlobalStyle />
        <BrowserRouter>
          <Header />
          {/* 
            使用render简单渲染一块内容，
            也可以使用component渲染一个组件 
          */}
          <Route path="/" exact component={Home}></Route>
          {/* <Route path="/detail" exact component={Detail}></Route> */}
          <Route path="/detail/:id" exact component={DetailLoadable}></Route>
          <Route path="/login" exact component={Login}></Route>
        </BrowserRouter>
      </React.Fragment>
    </Provider>
  );
}

export default App;
